<template>
  <Modal
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="修改转移码"
  >
    <div class="modal-main" style="position: relative">
      <Spin :withIcon="true" v-if="loading"></Spin>
      <div class="flx-row-s-c item-line">
        <div class="title-name">转入的域名</div>
        <span class="c-o">{{ info ? info.domainName : "" }}</span>
      </div>
      <div class="flx-row-s-c item-line">
        <div class="title-name">域名转移码</div>
        <Input v-model.trim="code" placeholder="请填写" style="width: 200px" />
      </div>
      <div class="flx-row-c-c" style="margin-top: 30px">
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="submit"
        >
          确认
        </div>
        <div class="big-button-size user-normal-button" @click="cancel">
          取消
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import { editTransferCode } from "@/api/user";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    info: {
      default: null,
    },
  },
  data() {
    return {
      loading: false,

      // 表单数据
      code: "",
    };
  },
  methods: {
    // 提交表单
    async submit() {
      if (!this.code) {
        this.$Message.warning("请输入域名转移码！");
        return;
      }
      this.loading = true;
      let data = {
        id: this.info.id,
        transferCode: this.code,
      };
      let res = await editTransferCode(data);
      if (res.code == 200) {
        this.$Message.success("修改成功！");
        this.$emit("success");
        this.cancel();
      }
      this.loading = false;
    },
    cancel() {
      this.config = false;
      this.code = "";
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;

  .item-line {
    margin-bottom: 10px;
  }
  .title-name {
    text-align: right;
    width: 120px;
    margin-right: 30px;
    font-size: 14px;
    line-height: 32px;
    color: #000;
    &::after {
      content: ":";
    }
  }
}
</style>